<template>
  <div class="bg_box">
    <!-- 头部区域 start -->
    <div class="header">
      <span class="topTbas" @click="$router.push({ name: 'Home' })">首页</span>
      <span>MayiGenerator-页面生成器</span>
      <span class="topTbas" @click="$router.push({ name: 'PageGenerator' })"
        >表单生成器</span
      >
    </div>
    <!-- 顶部操作区域 -->
    <div class="top_operation">
      <el-button type="text" @click="gatherText('导入文本数据')"
        >导入文本数据</el-button
      >
      <el-button type="text" @click="gatherBatch">批量导入字段</el-button>
    </div>
    <!-- 字段设置 -->
    <el-card class="box-card-setting" shadow="never">
      <div slot="header" class="clearfix">
        <span>字段设置</span>
      </div>
      <div class="field_setting">
        <el-card
          class="box-card"
          v-for="(item, index) in fieldsData"
          :key="item.model + index"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.model }}</span>

            <i
              style="float: right; padding: 3px 0;font-size: 16px;cursor: pointer;"
              type="text"
              class="el-icon-close"
            ></i>
          </div>
          <div>
            <el-form label-position="right" label-width="80px" :model="item">
              <el-form-item label="字段描述:">
                <el-input v-model="item.label" clearable></el-input>
              </el-form-item>
              <el-form-item label="字段类型:">
                <el-select v-model="item.type" placeholder="请选择字段类型">
                  <el-option
                    v-for="item in basicsList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否必填:">
                <el-switch v-model="item.attributes.required"> </el-switch>
              </el-form-item>
            </el-form>
            <div class="bottom">
              <el-button
                type="text"
                icon="el-icon-setting"
                @click="fieldSetting(item)"
                >字段设置</el-button
              >
              <el-divider direction="vertical"></el-divider>

              <el-button type="text" icon="el-icon-delete">删除字段</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
    <el-card class="box-card-setting" shadow="never">
      <div slot="header" class="clearfix">
        <span>crud设置</span>
      </div>
      <div class="crud">
        <div class="crud_conten">
          <el-switch v-model="config[0].status" disabled></el-switch
          ><span class="span">表格</span>
        </div>
        <div class="crud_conten">
          <el-switch v-model="config[0].export"> </el-switch
          ><span class="span">导出</span>
        </div>
        <div class="crud_conten">
          <el-switch v-model="config[0].batch"> </el-switch
          ><span class="span">批量删除</span>
        </div>
        <div class="crud_conten">
          <el-switch v-model="config[1].status"> </el-switch
          ><span class="span">新增</span>
        </div>
        <div class="crud_conten">
          <el-switch v-model="config[0].remove"> </el-switch
          ><span class="span">删除</span>
        </div>

        <div class="crud_conten">
          <el-switch v-model="config[2].status"> </el-switch
          ><span class="span">修改</span>
        </div>
        <div class="crud_conten">
          <el-switch v-model="config[3].status"> </el-switch
          ><span class="span">检索</span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card-setting" shadow="never">
      <div slot="header" class="clearfix">
        <span>crud配置</span>
      </div>
      <div>
        <!-- 增删改查 -->
        <CRUD :config="config" />
      </div>
    </el-card>
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :close="handleClose"
    >
      <el-input
        type="textarea"
        :rows="15"
        placeholder="请输入内容"
        v-model="originData"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="originOk">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="批量导入字段"
      :visible.sync="dialogBatch"
      width="800px"
      :close="handleBatch"
    >
      <div class="tableBatch">
        <div class="tableBatchOpt">
          <el-button type="text" @click="addField">添加字段</el-button>
        </div>
        <el-table height="500" :data="batchDta" border style="width: 100%">
          <el-table-column prop="model" label="字段名">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.model"
                placeholder="请输入字段字段名"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="label" label="字段描述">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.label"
                placeholder="请输入字段描述"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="字段类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.type" placeholder="请选择字段类型">
                <el-option
                  v-for="item in basicsList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="fieldDet(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogBatch = false">取 消</el-button>
        <el-button type="primary" @click="originBatchOk">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer
      class="drawer"
      title="字段设置"
      :visible.sync="drawer"
      direction="rtl"
    >
      <div>
        <RightPanel :activeFormItem.sync="activeFormItem"></RightPanel>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { basicsList } from "@/utils/formItemsConfig";
import RightPanel from "./module/RightPanel";
import CRUD from "./module/CRUD";
export default {
  components: { RightPanel, CRUD },

  data() {
    return {
      show: false,
      drawer: false,
      activeFormItem: {},
      basicsList,
      dialogVisible: false,
      title: "",
      originData: null,
      batchDta: [{ type: 1 }],
      dialogBatch: false,
      fieldsData: [],
      crud: {
        add: false,
        edir: false,
        search: false,
        remove: false,
        table: false,
        batchRemove: false,
        export: false
      },
      config: [
        //表格
        {
          mark: 1,
          remove: false,
          batch: false, // 批量删除
          status: true,
          export: false, // 表格导出
          label: "列表",
          value: "table",
          rowKey: "id",
          checkboxData: []
        },
        // 增
        {
          mark: 2,
          status: false,
          label: "新增",
          value: "create",
          labelCol: 4,
          wrapperCol: 20,
          checkboxData: []
        },
        // 改
        {
          mark: 3,
          status: false,
          label: "修改",
          value: "update",
          labelCol: 4,
          wrapperCol: 20,
          checkboxData: []
        },
        // 搜索
        {
          mark: 4,
          status: false,

          label: "搜索",
          value: "search",
          labelCol: 4,
          wrapperCol: 20,
          checkboxData: []
        }
      ]
    };
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    fieldSetting(data) {
      this.activeFormItem = data;
      this.drawer = true;
    },
    addField() {
      this.batchDta.push({ type: 1 });
    },
    fieldDet(index) {
      console.log("debug log --> ", index);
      this.batchDta.splice(index, 1);
    },
    handleBatch() {
      this.batchDta = [{ type: 1 }];
    },
    handleClose() {},
    gatherBatch() {
      this.dialogBatch = true;
    },
    originBatchOk() {
      this.fieldsData = [];
      this.config.forEach(items => {
        items.checkboxData = [];
      });
      this.batchDta
        .filter(item => item.model)
        .forEach(element => {
          let data = JSON.parse(JSON.stringify(basicsList)).filter(
            item => item.id === element.type
          )[0];
          data.model = element.model;
          data.checkbox = false;
          data.label = element.label || element.model;
          this.fieldsData.push(JSON.parse(JSON.stringify(data)));
          this.config.forEach(items => {
            items.checkboxData.push(JSON.parse(JSON.stringify(data)));
          });
        });
      this.show = true;
      this.dialogBatch = false;
    },
    originOk() {
      console.log("debug log --> ", this.originData);
      if (this.originData) {
        console.log("debug log --> ", this.originData.split(";"));
      }
    },

    gatherText(title) {
      console.log("debug log --> ", title);
      this.title = title;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss">
.bg_box {
  background-color: rgb(255, 255, 255);
  .header {
    width: 100%;
    height: 56px;
    background: #6a66f6;
    color: #fff;
    line-height: 56px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .topTbas {
      cursor: pointer;
    }
  }
  .top_operation {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
  }
}

.tableBatch {
  position: relative;
  .tableBatchOpt {
    height: 40px;
    display: flex;
    align-items: center;
  }
}

.box-card {
  width: 300px;
  margin: 8px;
  .bottom {
    height: 55px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e8e8e8;
    zoom: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
.field_setting {
  display: flex;
  flex-wrap: wrap;
}
.crud {
  display: flex;
  .crud_conten {
    margin: 0 15px;
    .span {
      margin-left: 5px;
    }
  }
}
.drawer {
  width: 3000px;
}
.box-card-setting {
  margin: 15px 0;
}
</style>
